"""
@author: Gaoyaoxia
@date: 2021-03-01 14:12:59
"""
<!-- 编辑委员页面 -->
<template>
  <div class="box-content">
    <a-form-model class="form" :model="form" layout="vertical" :colon="false">
      <section-title>基本信息</section-title>
      <div class="form-container">
        <div class="left-container">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="姓名" required>
                <a-input v-model="form.name" placeholder="请输入姓名" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="用户名" required>
                <a-input v-model="form.username" placeholder="请输入用户名" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="手机号码" required>
                <a-input v-model="form.phone" placeholder="请输入手机号码" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="性别" required>
                <a-radio-group
                  :options="member.sexOptions"
                  v-model="form.sex"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="出生年月" required>
                <a-date-picker
                  placeholder="请选择出生日期"
                  style="width: 100%"
                ></a-date-picker>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="民族" required>
                <s-select
                  v-model="form.strNation"
                  :selectOption="strNations"
                  placeholder="--请选择民族--"
                ></s-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="籍贯" required>
                <s-select
                  v-model="form.strJG"
                  :selectOption="strJGs"
                  placeholder="--请选择籍贯--"
                ></s-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="界别" required>
                <s-select
                  v-model="form.strSector"
                  :selectOption="strSectors"
                  placeholder="--请选择界别--"
                ></s-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="党派" required>
                <s-select
                  v-model="form.strFaction"
                  :selectOption="strFactions"
                  placeholder="--请选择党派--"
                ></s-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
        <!-- 头像 -->
        <div class="member-avatar">
          <img src="" />
        </div>
      </div>
      <section-title>学历情况</section-title>
      <!-- <div> -->
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="毕业院校">
            <a-input v-model="form.graduate" placeholder="请输入毕业院校" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="专业">
            <a-input v-model="form.major" placeholder="请输入专业" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="学历" required>
            <s-select
              v-model="form.strFullEdu"
              :selectOption="strFullEdus"
              placeholder="--请选择学历--"
            ></s-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="学位">
            <s-select
              v-model="form.strDegree"
              :selectOption="strNations"
              placeholder="--请选择学位--"
            ></s-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- </div> -->
      <section-title>工作情况</section-title>
      <!-- <div> -->
      <a-row>
        <a-col :span="8">
          <a-form-item label="职能标签">
            <s-select
              v-model="form.strDutyTag"
              :selectOption="dutyTags"
              placeholder="--请选择职能标签--"
            ></s-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="职称">
            <s-select
              v-model="form.strJob"
              :selectOption="strJobs"
              placeholder="--请选择职称--"
            ></s-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="工作日期">
            <a-date-picker
              v-model="form.workDate"
              placeholder="请选择工作时间"
              style="width: 100%"
            ></a-date-picker>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="工作单位及职务" required>
            <a-input
              v-model="form.strDuty"
              style="width: 100%"
              placeholder="请输入工作单位及职务"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- </div> -->
      <section-title>联系信息</section-title>
      <!-- <div> -->
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="通讯地址" required>
            <a-input v-model="form.address" placeholder="请输入通讯地址" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="邮编(办公)">
            <a-input v-model="form.stamp" placeholder="请输入邮编" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="电子邮件">
            <a-input v-model="form.email" placeholder="请输入电子邮件" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="办公电话">
            <a-input v-model="form.officeTell" placeholder="请输入办公电话" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="是否邮寄">
            <a-radio-group :options="member.isOptions" v-model="form.isPost" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="传真">
            <a-input v-model="form.fax" placeholder="请输入传真" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- </div> -->
      <section-title>届内情况</section-title>
      <!-- <div> -->
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="所属届次" required>
            <s-select
              v-model="form.strId"
              :selectOption="strIds"
              placeholder="--请选择届次--"
            ></s-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="是否连任">
            <a-radio-group
              :options="member.isOptions"
              v-model="form.isContinue"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="常委会组成 人员">
            <a-radio-group
              :options="member.isOptions"
              v-model="form.isCommittee"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="届内机构">
            <s-select
              v-model="form.strOrg"
              :selectOption="strOrgs"
              placeholder="--请选择届内机构--"
            ></s-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="届内职务">
            <s-select
              v-model="form.strDtuy"
              :selectOption="strDutys"
              placeholder="--请选择届内职务--"
            ></s-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="委员证号">
            <a-input v-model="form.memberID" placeholder="请输入委员证号" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="所属省份">
            <s-select
              v-model="form.province"
              :selectOption="provinces"
              placeholder="--请选择省份--"
            ></s-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="所属市区">
            <s-select
              v-model="form.city"
              :selectOption="cities"
              placeholder="--请选择市--"
            ></s-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="所属县/区">
            <s-select
              v-model="form.county"
              :selectOption="counties"
              placeholder="--请选择县/区--"
            ></s-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="届中状态">
            <a-radio-group
              :options="member.memStatusOptions"
              v-model="form.status"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="推荐单位">
            <a-input v-model="form.recommendOrg" placeholder="请输入推荐单位" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="所属编组">
            <s-select
              v-model="form.group"
              :selectOption="groups"
              placeholder="--请选择编组--"
            ></s-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- </div> -->
      <section-title>个人简历</section-title>
      <!-- <div class="resume"> -->
      <a-row>
        <a-col :span="24" style="padding-left: 0px">
          <a-form-model-item label="个人简历">
            <a-textarea :rows="4" style="height: 100px" v-model="form.resume" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- </div> -->
      <div class="form-footer">
        <a-button type="primary" @click="onSubmit"> 确定 </a-button>
        <a-button style="margin-left: 14px" @click="$router.back()">
          返回
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import sectionTitle from 'components/base/sectionTitle'
import { member } from 'assets/js/select-option-list'
export default {
  components: { sectionTitle },
  data() {
    return {
      member,
      strNations: [],
      strJGs: [],
      strSectors: [],
      strFactions: [],
      strFullEdus: [],
      dutyTags: [],
      strJobs: [],
      strIds: [],
      strOrgs: [],
      strDutys: [],
      provinces: [],
      cities: [],
      counties: [],
      groups: [],
      form: {
        name: '',
        username: '',
        phone: '',
        sex: '1',
        birthday: '',
        strNation: undefined,
        strJGs: undefined,
        strSector: undefined,
        strFaction: undefined,
        photoUrl: '',
        graduate: '',
        major: '',
        strFullEdu: undefined,
        strDegree: undefined,
        strDutyTag: undefined,
        strJob: undefined,
        workDate: '',
        address: '',
        stamp: '',
        email: '',
        officeTell: '',
        isPost: '1',
        fax: '',
        strId: '十四届四次',
        isContinue: '1',
        isCommittee: '1',
        strOrg: undefined,
        strDtuy: undefined,
        memberID: '',
        province: undefined,
        city: undefined,
        county: undefined,
        status: '1',
        recommendOrg: '',
        group: undefined,
        resume: ''
      }
    }
  },
  computed: {},
  watch: {},
  mounted() {
    let id = this.$route.query.id
    console.log('记录：', id)
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.form-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .left-container {
    width: calc(100% - 200px);
  }
  .member-avatar {
    height: 230px;
    width: 190px;
    margin: 0px 56px;
    background: rgb(245, 245, 248);
    padding-top: 20px;
    box-sizing: border-box;
  }
}
.resume {
  width: 100%;
  padding: 15px 10px 15px 10px;
  /deep/.ant-form-item-label {
    height: 100px;
    line-height: 100px;
  }
}

/**select的重置样式 */
/deep/.ant-select {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
}
/deep/.ant-select-selection--single {
  height: 40px;
  border-radius: 4px;
}
/deep/.ant-select-selection__rendered {
  line-height: 38px;
}
/deep/.ant-select-selection__placeholder {
  color: #333;
}
/deep/.ant-select-dropdown {
  line-height: 40px;
}
</style>